/*
 * @CreatDate: 2020-08-31 13:56:32
 * @Describe: 基于jointjs的流程图解决方案
 */

import "./index.less";
import { useEffect, useState, useRef } from "react";
import { Tooltip, Divider, Switch, Button, Select } from "antd";
import {
	MinusOutlined, PlusOutlined, ClearOutlined, UndoOutlined,
	RedoOutlined, PrinterOutlined, FullscreenOutlined, FullscreenExitOutlined,
	InfoCircleOutlined, SaveOutlined
} from "@ant-design/icons";
import Workflow from "@/components/Workflow";
import stencilItem from "./stencilItem";

const { Option } = Select;

export default props => {
	const [count, setCount] = useState(100);
	let graphInstance = useRef();

	useEffect(() => {
		const dom = document.getElementById("workflowPaper");
		const config = {};
		graphInstance.current = new Workflow(dom, config);
		const el = document.getElementById("workflowStencil");
		graphInstance.current.addStencil(el, stencilItem);
		graphInstance.current.addSelection();

		// 实例挂载paper和graph，需要监听事件的可以根据业务设置
		// graphInstance.current.paper.on("cell:pointerdblclick", (cellView) => {
		// 	console.log(cellView);
		// });

		return () => {
			graphInstance.current.destroy();
		};
	}, []);

	const onSnapChange = (checked) => {
		if (checked) {
			graphInstance.current.openSnaplines();
		} else {
			graphInstance.current.closeSnaplines();
		}
	};

	return (
		<div className="lb-workflow-wrap">
			<div id="workflowStencil" className="lb-stencil"></div>
			<div className="lb-paper">
				<div id="workflowPaper" className="workflow-paper"></div>
				<div className="lb-toolbar">
					<span className="zoom">
						<Tooltip title="缩小">
							<MinusOutlined className="zoom-out" onClick={() => {
								if (count <= 20) return;
								graphInstance.current.zoomOut();
								setCount(count - 20);
							}} />
						</Tooltip>
						<span className="text">{count}%</span>
						<Tooltip title="放大">
							<PlusOutlined className="zoom-in" onClick={() => {
								if (count >= 200) return;
								graphInstance.current.zoomIn();
								setCount(count + 20);
							}} />
						</Tooltip>
					</span>
					<Divider type="vertical" />
					<Tooltip title="清空画布">
						<ClearOutlined
							className="clear-graph"
							onClick={() => graphInstance.current.clear()}
						/>
					</Tooltip>
					<Tooltip title="撤销">
						<UndoOutlined
							className="undo"
							onClick={() => graphInstance.current.undo()}
						/>
					</Tooltip>
					<Tooltip title="重做">
						<RedoOutlined
							className="redo"
							onClick={() => graphInstance.current.redo()}
						/>
					</Tooltip>
					<Divider type="vertical" />
					<Tooltip title="打印">
						<PrinterOutlined
							className="print"
							onClick={() => graphInstance.current.print()}
						/>
					</Tooltip>
					<Tooltip title="全屏">
						<FullscreenOutlined
							className="full-screen"
							onClick={() => graphInstance.current.fullScreen()}
						/>
					</Tooltip>
					<Tooltip title="退出全屏">
						<FullscreenExitOutlined
							className="full-screen"
							onClick={() => graphInstance.current.exitFullscreen()}
						/>
					</Tooltip>
					<span className="ml10">
						辅助线：
            				<Switch defaultChecked onChange={onSnapChange} />
					</span>
					<Button className="ml10" onClick={() => graphInstance.current.openAsSVG()}>
						OpenAsSVG
					</Button>
					<Select
						className="ml10"
						style={{ width: 140 }}
						placeholder="美化布局"
						onChange={(e) => graphInstance.current.beautify(e)}
					>
						<Option value="TB">top-to-bottom</Option>
						<Option value="BT">bottom-to-top</Option>
						<Option value="LR">left-to-right</Option>
						<Option value="RL">right-to-left</Option>
					</Select>
					<Tooltip title="按住ctrl/command,可多选组件">
						<InfoCircleOutlined className="info" />
					</Tooltip>
					<Button
						icon={<SaveOutlined />}
						className="save"
						onClick={() => {
							console.log(graphInstance.current.getData());
							alert(JSON.stringify(graphInstance.current.getData()));
						}}
					>
						保存
					</Button>
				</div>
			</div>
		</div>
	);
};
